<template>
	<view class="page">
		<view v-if="list.length">
			<u-card v-for="(v, k) in list" :key="k" :title="v.realname" :sub-title="v.createTime">
				<view slot="body">
					<u-parse :html="v.content" class="u-parse"></u-parse>
					<view class="bd-item file" v-if="v.file.length" @tap.stop>
						<u-image v-for="(sv, sk) in v.file" :key="sk" :src="$env[envName].BASE_URL + sv.filePath" width="100px" height="100px" @click="previewFile(v.file, sk)"></u-image>
					</view>
					<view class="bd-item">
						<u-tag shape="circle" :text="v.category"></u-tag>
						<u-tag shape="circle" :text="v.nextTime"></u-tag>
					</view>
					<view class="bd-item">
						<view class="sub-title">关联联系人</view>
						<view class="users">
							<template v-for="(sv, sk) in v.contactsList">
								<template v-if="sv">
									<u-tag :key="sk" shape="circle" :text="sv.name"></u-tag>
								</template>
							</template>
						</view>
						<view><u-tag shape="circle" :text="v.typesName"></u-tag></view>
					</view>
				</view>
			</u-card>
		</view>
		<u-empty v-if="page >= 1 && !list.length" text="数据为空" mode="list"></u-empty>
		<u-loadmore v-else :status="loadStatus" @loadmore="loadmore" />
	</view>
</template>

<script>
export default {
	components: {},
	props: {
		data: {
			type: Object,
			default() {
				return {};
			},
		},
	},
	data: () => ({
		// 类型 quotation 默认是列表；还有其他类型比如：待审核 unVerify
		type: 'quotation',
		// 第几页
		page: 1,
		// 每页显示数量
		limit: 10,
		// 列表数据
		list: [],
		// 底部加载状态
		loadStatus: 'loadmore',
		envName: '',
	}),
	methods: {
		// 获取列表
		async getList() {
			this.loadStatus = 'loading';
			let data = {
				page: this.page,
				limit: this.limit,
			};
			data = Object.assign(data, this.data);

			let res = await this.$api.customer.common.bulletinRecordList(data);
			if (res.code == 200) {
				let list = res.data.list || [];

				if (this.page === 1) {
					this.list = list;
				} else {
					this.list.push(...list);
				}

				// list为空，说明没有更多数据了，显示没有更多数据的提示
				if (!list.length || (this.page == 1 && list.length == res.data.totalRow)) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			}
		},
		// 上拉加载
		loadmore() {
			this.page++;
			this.getList();
		},
		// 预览图片并下载
		previewFile(list, index) {
			let file = [];
			list.forEach((v, k) => {
				file.push(this.$env[this.envName].BASE_URL + v.filePath);
			});
			uni.previewImage({
				current: file[index],
				urls: file,
				longPressActions: {
					itemList: ['保存图片'],
					success: function (data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function (err) {
						console.log(err.errMsg);
					},
				},
			});
		},
	},
	mounted() {
		this.envName = process.env.NODE_ENV;
		this.getList();
	},
	computed: {},
	watch: {},

	// 周期函数--监听页面隐藏
	onHide() {},
	// 周期函数--监听页面卸载
	onUnload() {},
};
</script>

<style lang="scss" scoped>
.u-card /deep/ {
	.u-card__head {
		padding: 8px 15px !important;
	}
	.u-parse {
		white-space: pre-wrap;
	}
	.bd-item {
		margin: 10px 0;

		.u-tag {
			margin-right: 10px;
		}

		.sub-title,
		.users {
			margin-bottom: 10px;
		}
	}
	.file {
		margin: 0 -10px;
		.u-image {
			display: inline-block;
			margin: 10px;
		}
	}
}
</style>
